<template>
  <view class="seek-list">
    <view class="profile-card">
      <image
        class="profile-img"
        src="https://th.bing.com/th/id/R.a3326dfea8ea5544ebd406b824137ee9?rik=c6C3lRiXIQoEYg&riu=http%3a%2f%2fimg.touxiangwu.com%2fzb_users%2fupload%2f2022%2f11%2f202211021667379370320460.jpg&ehk=VTjaG57lKTodjm5E3FWOUlJf%2fWxUbyZ8lw%2bMXV2END4%3d&risl=&pid=ImgRaw&r=0"
      >
      </image>
      <view class="profile-info">
        <view class="name-gender">
          <text class="name">青木</text>
          <image class="gender-icon" src="../../../static/images/boy.png"></image>
        </view>
        <view class="details">
          <text>南京栖霞区</text>
          <text>22岁</text>
          <text>未婚</text>
          <text>175cm</text>
          <text>市场/销售</text>
          <text>大专</text>
          <text>5年</text>
        </view>
        <view class="tags">
          <view class="tag">旅行</view>
          <view class="tag">音乐</view>
          <view class="tag">看电影/剧</view>
          <view class="tag">看书</view>
          <view class="tag">摄影</view>
          <view class="tag">打游戏</view>
        </view>
      </view>
    </view>
    <view class="desc">乐观积极向上顾家，喜欢喝茶听听音乐</view>
    <view class="requirements">
      <view class="requirement-tag">寻觅</view>
      <view class="requirement-text">
        <text>23~40岁，160~175cm，未婚，高中，5~8千...</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.seek-list {
  border-radius: 10px;
  margin: 10px;
  padding: 10px;
  background-color: #ffffff;
  box-shadow: 2rpx 5rpx 10rpx -2rpx #dbdbdb;
}

.profile-card {
  display: flex;
  border-radius: 8px;

  .profile-img {
    width: 120px;
    height: 120px;
    border-radius: 10%;
    margin-right: 8px;
  }

  .profile-info {
    flex: 1;

    .name-gender {
      display: flex;
      align-items: center;
      margin-bottom: 8px;

      .name {
        font-size: 20px;
        font-weight: bold;
        margin-right: 8px;
      }

      .gender-icon {
        width: 16px;
        height: 16px;
      }
    }

    .details {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8px;

      text {
        margin-right: 8px;
        color: #666;
      }
    }

    .tags {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 8px;

      .tag {
        background-color: #e0f7fa;
        color: #00796b;
        padding: 4px 8px;
        border-radius: 4px;
        margin-right: 8px;
        margin-bottom: 8px;
      }
    }
  }
}

.desc {
  font-size: 15px;
  line-height: 1.5;
  color: #999999;
  margin-bottom: 8px;
}

.requirements {
  display: flex;
  align-items: center;

  .requirement-tag {
    background-color: #00bfa5;
    color: #ffffff;
    padding: 4px 8px;
    border-radius: 4px;
    margin-right: 8px;
    white-space: nowrap;
  }

  .requirement-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #666666;
  }
}
</style>
